<template>
  <div class="mask">
    <h3>{{seller.name}}</h3>
    <div class="rating">
      <v-rating :score="seller.score"></v-rating>
    </div>
    <div class="youhui">
      <div class="caption">
        <div class="line"></div>
        <div class="title">优惠信息</div>
        <div class="line"></div>
      </div>
      <ul class="content">
        <li v-for="support in seller.supports">
          <img :src="'/static/images/' + support.type + '@2x.png'">
          <span>{{support.description}}</span>
        </li>
      </ul>
    </div>
    <div class="gonggao">
      <div class="caption">
        <div class="line"></div>
        <div class="title">商家公告</div>
        <div class="line"></div>
      </div>
      <div class="content">
        {{seller.bulletin}}
      </div>
    </div>
    <div class="footer">
      <i class="close iconfont icon-cha" @click="close()"></i>
    </div>
  </div>
</template>

<script>
    import rating from '../rating'
    export default {
      components:{
        "v-rating": rating
      },
      props:{
        seller:{
          type: Object,
          required: true
        }
      },
      data:function () {
          return {
          }
      },

      methods: {
        close: function () {
          this.$emit('close')
        }
      }
    }
</script>

<style lang="scss" scoped>
  .mask{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    padding: 0 40px;

    background-color: rgba(7,17,27,0.8);
    z-index: 1000;

    h3{
      margin-top: 64px;

      line-height: 16px;
      font-size: 16px;

      text-align: center;
    }

    .rating{
      margin-top: 18px;
      text-align: center;
    }

    .youhui{
      .caption {
        display: flex;
        margin-top: 28px;

        .line {
          flex: auto;

          position: relative;
          top: -8px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .title {
          font-size: 16px;
          line-height: 16px;
          padding: 0 12px;
        }
      }
      .content{
        margin: 22px 0;
        padding: 0 12px;
        li{
          margin-bottom: 12px;
          img{
            width: 16px;
            height: 16px;
            margin-right: 6px;
          }
          span{
            /*一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线*/
            display: inline-block;
            overflow: hidden;

            font-size: 14px;
            line-height: 16px;
          }
        }
      }
    }

    .gonggao{
      .caption {
        display: flex;
        margin-top: 28px;

        .line {
          flex: auto;

          position: relative;
          top: -8px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .title {
          font-size: 16px;
          line-height: 16px;
          padding: 0 12px;
        }
      }
      .content {
        margin: 22px 0;
        padding: 0 12px;

        font-size: 12px;
        line-height: 2;
        text-indent:2em;
      }
    }

    .footer{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 64px;

      text-align: center;

      .close{
        font-size: 20px;
        line-height: 1;
      }
    }
  }
</style>
